<template>
    <div class="main-layout">
      <header class="header">
        <div class="container">
          <div class="logo">
            <router-link to="/">
              <img src="@/assets/images/logo.png" alt="瓜子二手车">
              <span>瓜子二手车</span>
            </router-link>
          </div>
          <nav class="nav">
            <router-link to="/">首页</router-link>
            <router-link to="/cars">买车</router-link>
            <router-link to="/sell">卖车</router-link>
            <router-link to="/about">关于我们</router-link>
          </nav>
          <div class="user-actions">
            <template v-if="userStore.isLoggedIn">
              <el-dropdown>
                <div class="user-info">
                  <el-avatar 
                    :size="32" 
                    :src="avatarUrl"
                    @error="handleAvatarError"
                  />
                  <span>{{ userStore.userInfo.name }}</span>
                </div>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="$router.push('/profile')">
                      个人中心
                    </el-dropdown-item>
                    <el-dropdown-item @click="$router.push('/favorites')">
                      我的收藏
                    </el-dropdown-item>
                    <el-dropdown-item divided @click="handleLogout">
                      退出登录
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </template>
            <template v-else>
              <el-button type="text" @click="$router.push('/login')">
                登录/注册
              </el-button>
            </template>
          </div>
        </div>
      </header>
  
      <main class="main-content">
        <router-view />
      </main>
  
      <footer class="footer">
        <div class="container">
          <div class="footer-content">
            <div class="footer-section">
              <h3>关于瓜子</h3>
              <p>瓜子二手车直卖网，没有中间商赚差价</p>
            </div>
            <div class="footer-section">
              <h3>联系我们</h3>
              <p>客服热线: 400-123-4567</p>
              <p>邮箱: service@guazi.com</p>
            </div>
            <div class="footer-section">
              <h3>关注我们</h3>
              <div class="social-links">
                <a href="#">微信</a>
                <a href="#">微博</a>
              </div>
            </div>
          </div>
          <div class="copyright">
            <p>&copy; 2025 瓜子二手车 版权所有</p>
          </div>
        </div>
      </footer>
    </div>
  </template>
  
  <script setup>
  import { useUserStore } from '@/store/user'
  
  const userStore = useUserStore()
  userStore.uploadUserAvatar
  
  const handleLogout = () => {
    userStore.logout()
    window.location.reload()
  }
  </script>
  
  <style lang="scss" scoped>
  .main-layout {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  
  .header {
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
  
    .container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
      height: 60px;
    }
  
    .logo {
      a {
        display: flex;
        align-items: center;
        text-decoration: none;
        color: #ff6a00;
        font-weight: bold;
        font-size: 20px;
  
        img {
          height: 32px;
          margin-right: 8px;
        }
      }
    }
  
    .nav {
      display: flex;
      gap: 30px;
  
      a {
        text-decoration: none;
        color: #333;
        font-weight: 500;
        transition: color 0.3s;
  
        &:hover,
        &.router-link-active {
          color: #ff6a00;
        }
      }
    }
  
    .user-actions {
      .user-info {
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
      }
    }
  }
  
  .main-content {
    flex: 1;
  }
  
  .footer {
    background: #2c3e50;
    color: #ecf0f1;
    padding: 40px 0 20px;
  
    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 20px;
    }
  
    .footer-content {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 30px;
      margin-bottom: 30px;
    }
  
    .footer-section {
      h3 {
        margin-bottom: 15px;
        color: #ff6a00;
      }
  
      p {
        margin: 5px 0;
      }
    }
  
    .social-links {
      display: flex;
      gap: 15px;
  
      a {
        color: #ecf0f1;
        text-decoration: none;
  
        &:hover {
          color: #ff6a00;
        }
      }
    }
  
    .copyright {
      text-align: center;
      padding-top: 20px;
      border-top: 1px solid #34495e;
      color: #bdc3c7;
    }
  }
  
  @media (max-width: 768px) {
    .header {
      .container {
        padding: 0 15px;
      }
  
      .nav {
        gap: 15px;
        font-size: 14px;
      }
    }
  
    .footer {
      padding: 30px 0 15px;
  
      .footer-content {
        grid-template-columns: 1fr;
        gap: 20px;
      }
    }
  }
  </style>